<?php
include "./conf/.htconfig.php";
include "./getVideoSession.php";
?>
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>VAT - annotate</title>
    <link rel="stylesheet" type="text/css" href="<?= $conf['base_url'] ?>style/style.css" media="screen" />

    <script type="text/javascript" src="<?= $conf['jquerysrc'] ?>"></script>
    <script type="text/javascript">
      $(document).ready(function(){
<?php
$rand = rand();
$stamp = date("YmdGis");
$ip = $_SERVER['REMOTE_ADDR'];
$id = "$stamp-$ip-$rand";
?>
    $("#textControl").hide();
    if(!sessionStorage.id) {
      sessionStorage.id = '<?= $id ?>';
    }
    var video = <?= "\"" . $video . "\"" ?>;
		
    $("#setText").click(function () {
      $("video#show").get(0).pause();
      $("#textControl").show('fast');
    });
    $(".setTime").click( function() {
      var video_duration = Math.floor($("video#show").get(0).duration);
      var current_time = Math.floor($("video#show").get(0).currentTime);
      var quotient = (current_time / video_duration);
      var rel_mark = Math.floor(quotient * 1000);
      if (this.id == "Red") {
        var colorName = "röd";
      } else if (this.id == "Green") {
        var colorName = "grön";
      } else if (this.id == "Yellow") {
        var colorName = "gul";
      }
      if (current_time != 0) {
        var minutes = Math.floor(current_time/60);
        var seconds = (current_time % 60);
        var data = "video=" + video + "&relMark=" + rel_mark + "&timeMark=" + current_time + "&color=" + this.id + "&id=" + sessionStorage.id;
        if ($.trim($("#text").val()).length != 0) {
          alert($.trim($("#text").val()));
          if ($("video#show").get(0).paused) {
            data += "&text=" + $.trim($("#text").val());
            $("#text").val("");
            $("#textControl").hide('fast');
            $("video#show").get(0).play();
          }
        }
        alert(data);
        $.ajax({  
          type: "POST",  
          url: "./setTime.php",
          dataType: "json",
          data: data,
          success: function(o){
            if (o.result == 1) {
              $('span#success').html("En " + colorName + " markering tillaggd vid " + minutes + ":" + seconds + ". ");
            } else {
              $('span#success').html("Ett oväntat fel har uppstått");
              alert(o.error);
            }
          } 
        });
      } else {
        $('span#success').html("Starta filmen!");
      }
    });
  });
    </script>
  </head>
  <body>
    <a href="<?= $conf['base_url'] ?>"><div class="back"></div></a> 
    <div id="container">
      <h1 id="rubrik"><?= $video_name ?></h1>  
      <video id="show" controls="controls" preload="auto" width="800">
        <?php
        $video_ogg = "video/" . $video . ".ogv";
        if (file_exists("./" . $video_ogg)) {
          echo "<source src='{$conf['base_url']}" . $video_ogg . "'  type='video/ogg' />";
        }
        $video_webm = "video/" . $video . ".webm";
        if (file_exists("./" . $video_webm)) {
          echo "<source src='{$conf['base_url']}" . $video_webm . "'  type='video/webm' />";
        }
        ?>
        Din webläsare har inte stöd för att visa video med HTML5!
      </video>
      <div id="controls">
        <div id="textControl">
          <textarea id="text" placeholder="Skriv din kommentar här!"></textarea>
        </div>
        <button type="button" class="setTime" value="röd" id="Red">Röd</button>
        <button type="button" class="setTime" value="gul" id="Yellow">Gul</button>
        <button type="button" class="setTime" value="grön" id="Green">Grön</button>
        <br />
        <button type="button" id="setText" style="width: 100px;">Text</button>
        <br />
        <span id="success"></span>
      </div>

    </div>
  </body>
</html>
